<template>
  <div class="areaSelection">
    <div class="select-area clearfix">
      <div class="select-title fl"><b>区域</b></div>
      <div class="selection fl">
        <div class="select-tab">
          <a :class="item.isActive ? 'active' : ''" v-for="(item, index) in areaData" :key="index" @click="changeRegion(item, index)">{{ item.label }}</a>
        </div>
        <div class="second-tabs" v-show="areaData[firstRegion.index].children.length != 0">
          <a :class="[v.isActive ? 'active' : '', v.disabled ? 'disabled' : '']" v-for="(v, i) in areaData[firstRegion.index].children" :key="i" @click="changeRegion(v, i)">
            {{ v.label }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AreaSelection",

  data() {
    return {
      // 区域数据
      areaData: [],

      // 第一个区域
      firstRegion: {
        value: "不限",
        index: 0,
        level: 2,
      },
      // 第二个区域
      secondRegion: {
        value: "不限",
        index: 0,
        level: 3,
        firstIndex: 0,
      },
    };
  },

  created() {
    this.areaData = JSON.parse(JSON.stringify(this.$root.areaData));
  },

  methods: {
    changeRegion(o, i) {
      console.log(o);
      // 点击的区域是高亮,返回
      if (o.isActive) {
        return;
      }

      // 判断父级选项还是子级
      if (o.level == 2) {
        // 清除之前高亮的选项
        for (let key of this.areaData) {
          if (key.isActive) {
            key.isActive = false;
          }
        }
        o.isActive = true; // 点击的选项高亮

        this.firstRegion.value = o.value; // 保存选项的值
        console.log("this.firstRegion.value", this.firstRegion.value);
        this.firstRegion.index = i; // 保存选项的索引值
        this.secondRegion.index = 0; // 隐藏子选项的标签
        let oj = {
          location: this.firstRegion.value,
          serveArea: ''
        }
        this.$emit('getLocation', oj)
        if (i == 0) {
          // 点击 不限 选项
          return;
        }
        if (o.children[0].isActive) {
          return;
        }

        // 初始化子选项高亮
        for (let key of o.children) {
          if (key.isActive) {
            key.isActive = false;
          }
        }
        o.children[0].isActive = true; // 子选项第一个高亮
        this.secondRegion.value = "不限"; // 标签赋值
        // console.log("this.secondRegion.value ==>", this.secondRegion.value);
      } else if (o.level == 3) {
        // 点击选项为子选项
        // 清除之前高亮的选项
        for (let key of this.areaData[this.firstRegion.index].children) {
          if (key.isActive) {
            key.isActive = false;
          }
        }
        o.isActive = true; // 点击的选项高亮

        this.secondRegion.value = o.value; // 赋值
        // console.log("this.secondRegion.value ==>", this.secondRegion.value);
        this.secondRegion.index = i; // 保存索引值
        this.secondRegion.firstIndex = this.firstRegion.index; // 保存父元素索引值
        let oj = {
          location: this.firstRegion.value,
          serveArea: this.secondRegion.value
        }
        this.$emit('getLocation', oj)
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/less/variable.less";
.areaSelection {
  .select-area {
    line-height: 40px;
    border-bottom: 1px dashed #ccc;
  }
  .selection {
    width: calc(100% - 32px);
    position: relative;
  }

  .select-tab {
    padding-left: 20px;
    padding-right: 150px;
    overflow: hidden;

    a {
      margin-right: 20px;
      font-size: 13px;
      cursor: pointer;
      &:hover {
        color: @theme;
      }
      &.active {
        color: @theme;
      }
    }

    > div {
      label {
        min-width: 100px;
        /deep/ .el-checkbox__label {
          font-size: 13px;
        }
      }
    }

    i {
      color: #606266;
    }
  }

  .second-tabs {
    padding: 0 10px;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    a {
      margin-right: 20px;
      font-size: 13px;
      cursor: pointer;
      &:hover {
        color: @theme;
      }
      &.active {
        color: @theme;
      }
      &.disabled {
        pointer-events: none;
        font-weight: bold;
      }
    }
  }
}
</style>